import { getInformationList } from "./request.js";
import { formatURL, setBrowseNumber } from "./base.js";

$("#header").load("./layout/header.html", function () {
	$($(".navbarList > li")[0]).addClass("headerActive");
	$($(".navbarList > li")[0]).find("a").attr({
		href: "javascript:;"
	});
});

$("#footer").load("./layout/footer.html", function () {
	$("#accordionExample").on("hide.bs.collapse show.bs.collapse", function (e) {
		let target = e.target;
		let partens = "#" + $("#" + target.id).attr("aria-labelledby");
		$(partens).find("i").toggleClass("bi-chevron-down");
		$(partens).find("i").toggleClass("bi-chevron-up");
	});

	// 随机生成游园预约人数
	setBrowseNumber();
});

const getMediaList = () => {
	let params = {
		pageNum: 1,
		pageSize: 1,
		type: "媒体聚焦/MEDIA_FOCUS"
	};
	getInformationList(params).then((res) => {
		if (res.code == 200 && res.data.records.length > 0) {
			let detail = res.data.records[0];
			$(".media").html(`
                    <div class="card w-100">
                        <a href="./dynamicInfo.html?id=${
													detail.id
												}&type=媒体聚焦">
							<div class="position-relative">
								<img
									src="${formatURL(detail.titleImg)}"
									class="card-img-top"
									style="max-height: 340px"
									alt="..."
								/>
								<div class="position-absolute news-lable text-white">
									媒体聚焦
								</div>
							</div>
							<div class="card-body">
								<div class="card-title h4 mb-1 s2">
									${detail.title}
								</div>
								<p class="time mb-3">${detail.createTime}</p>
								<p class="card-text s2">
									${detail.sketch}
								</p>
							</div>
                        </a>
					</div>
                `);
		}
	});
};

const getGardenNewsList = () => {
	let params = {
		pageNum: 1,
		pageSize: 1,
		type: "园区动态/GARDEN_NEWS"
	};
	getInformationList(params).then((res) => {
		if (res.code == 200 && res.data.records.length > 0) {
			let detail = res.data.records[0];
			$(".gardenNews").html(`
                    <div class="card w-100">
                        <a href="./dynamicInfo.html?id=${
													detail.id
												}&type=园区动态">
							<div class="position-relative">
								<img
									src="${formatURL(detail.titleImg)}"
									class="card-img-top"
									style="max-height: 340px"
									alt="..."
								/>
								<div class="position-absolute news-lable text-white">
									园区动态
								</div>
							</div>
							<div class="card-body">
								<div class="card-title h4 mb-1 s2">
									${detail.title}
								</div>
								<p class="time mb-3">${detail.createTime}</p>
								<p class="card-text s2">
									${detail.sketch}
								</p>
							</div>
                        </a>
					</div>
                `);
		}
	});
};

const getList = () => {
	let params = {
		pageNum: 1,
		pageSize: 99,
		isStick: 1,
		type: "园区活动/CampusActivities"
	};
	getInformationList(params).then((res) => {
		if (res.code == 200 && res.data.records.length > 0) {
			let list = res.data.records || [];
			let html = "";
			$(".news-lable1").show();
			$.each(list, function (index, item) {
				html += `
                    <li>
                        <a href="./dynamicInfo.html?id=${item.id}&type=园区活动">
                            <div class="card-title h4 mb-1 s2">
                                ${item.title}
                            </div>
                            <p class="time mb-4">${item.createTime}</p>
                        </a>
                    </li>
                `;
			});
			$(".news-list").html(html);
		}
	});
};

$(function () {
	// 获取媒体聚焦数据
	getMediaList();
	// 获取园区动态
	getGardenNewsList();
	// 园区活动
	getList();
	// 视频实例
	var player = videojs(
		"example_video",
		{
			poster: "./src/images/banner1.png",
			controls: false,
			autoplay: true,
			fluid: true,
			language: "zh-CN",
			techOrder: ["html5"],
			loop: true,
			muted: true,
			preload: "auto"
		},
		function () {
			let data = {
				src: "https://1305846945.vod2.myqcloud.com/ee60c457vodtranscq1305846945/d2a7b6ed387702305377407081/v.f100800.mp4",
				type: "video/mp4"
			};
			player.src(data);
			player.load(data);
			player.play();

			let ua = navigator.userAgent.toLowerCase();
			if (ua.match(/MicroMessenger/i) == "micromessenger") {
				document.addEventListener("DOMContentLoaded", function () {
					document.addEventListener(
						"WeixinJSBridgeReady",
						function () {
							player.play();
						},
						false
					);
				});
			}
		}
	);

	$("body").on("click", () => {
		player.play();
	});
});
